<template>
  <div>
    <div class="border1"></div>
    <div class="weilei">
      <div class="p1">测试伪类选择器</div>
      <p class="p1">第一个P</p>
      <p class="p1">第二个P</p>
      <p class="p1">第三个P</p>
      <p class="p1">第四个P</p>
      <div class="p1">第二个div</div>
      <!-- <br/> -->
    </div>
    <div class="weilei">
      <div class="p1">第二个大盒子</div>
      <p class="p1">第一个P</p>
      <p class="p1">第二个P</p>
    </div>

    <div class="pcy-icon-loading">
      <span class="iconfont">&#xe8fd;</span>
    </div>

    <pcy-button type="primary">按钮</pcy-button>
    <div class="c4"></div>
    <div class="c5"></div>

    <div class="any-shape">11111111111111111111111111111</div>

    <!-- 毛玻璃 -->
    <div class="background">
      <div class="background-content">
        <div class="background-content-image"></div>
        <img src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
          alt="测试图片" />
      </div>
    </div>

    <div class="parentDiv">
      <div class="childDiv">
        <div>
          222
        </div>
      </div>
    </div>

    <div class="fu">
      <div style="height:200px">

     </div>
     <div>

     </div>
     <div>

     </div>
    </div>

  </div>
</template>

<script>
import pcyButtonGroup from "@/components/ui/pcy-button/pcy-button-group.vue";
export default {
  components: { pcyButtonGroup }
};
</script>


<style lang="scss" scoped>
[class^="pcy-icon-"],
[class*=" pcy-icon-"] {
  display: inline-block;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.pcy-icon-loading {
  animation: rotating 2s linear infinite;
}

.border1 {
  border: 2px solid #f0f;
  outline: #00ff00 dotted 10px;
  width: 50px;
  height: 40px;
  margin: 15px;
}

p:first-of-type {
  background: #0ff;
}

p:last-child {
  color: #ff0;
}

p:last-of-type {
  font-size: 25px;
}

p:not(:last-of-type) {
  // font-weight: 900;
  font-style: italic;
}

p:not(:first-of-type) {
  font-weight: bolder;
}

.weilei :not(:nth-last-child(1)) {
  text-decoration: underline;
}

.weilei .p1:not(:last-child) {
  padding-left: 50px;
}

.c4 {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

.c5 {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(#fff, #000, #fff 1deg);
}

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

.background {
  width: 260px;
  height: 200px;
  overflow: hidden;
}

.background-content {
  width: 260px;
  height: 100%;
  position: relative;
  /* 让图片居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-content-image {
  position: absolute;
  /* 重点，不能让背景大过于展示的图片 */
  z-index: -1;
  width: 260px;
  height: 100%;
  filter: blur(8px);
  background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

img {
  max-height: 100%;
}

.childDiv {
  margin-left: 20px;
}

.parentDiv .childDiv:nth-child(1) {
  margin-left: 0;
}

.fu{
  display: flex;
  flex-direction: column;
}
.zi{
  flex: 1;
}
</style>
